import { PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useRef, useState } from 'react';
import AddModal from '@/components/Modal/AddModal';
import { FileAdd, CreateRecord } from '../mzgl/form'
import AddMedical from '@/components/AddMedical';
import getColumns from './columns';
import MedicalDetail from '@/components/MedicalDetail'
import { getZYList, addRecord, uploadResult, saveBL } from '@/services/zy'
import { proTableFormat } from '@/utils/format'
import WithAuthComp from '@/components/WithAuthComp';
import { ROLE } from '@/common/const'

const TYPE = 'zy'
export default () => {
    const [id, setId] = useState<string>('')
    const [editable, setEditable] = useState<boolean>(false)
    const actionRef = useRef<ActionType>();
    const dialogRef = useRef<any>()
    const fileAddRef = useRef<any>()
    const addMedicalRef = useRef<any>();
    const medicalDetailRef = useRef<any>();
    const columns = getColumns({ setId, addMedicalRef, fileAddRef, medicalDetailRef, setEditable });

    const handleCreateRecordFinish = () => {
        dialogRef.current.hideModelRef()
        actionRef.current?.reload(true)
    }

    const handleSaveBl = () => {
        addMedicalRef.current.hideModelRef()
        actionRef.current?.reload()
    }
    return (
        <>
            <ProTable
                columns={columns}
                cardBordered
                actionRef={actionRef}
                request={async (params, sort, filter) => {
                    const { pageInfo } = await getZYList({ ...params, currentPage: params.current });
                    return proTableFormat(pageInfo)
                }}
                rowKey="id"
                search={{
                    labelWidth: 'auto',
                    span: 6
                }}
                options={{
                    setting: true,
                    reload: false
                }}
                pagination={{
                    pageSize: 10,
                    onChange: (page) => console.log(page),
                }}
                dateFormatter="string"
                // 表格新建栏
                toolBarRender={() => [
                    <WithAuthComp authKey={[ROLE.YS, ROLE.HS]}>
                        <Button
                            key="button"
                            icon={<PlusOutlined />}
                            onClick={() => {
                                dialogRef?.current?.showModelRef()
                            }}
                            type="primary"
                        >
                            就诊
                        </Button>
                    </WithAuthComp>
                    ,
                ]}
            />
            {/* 就诊 */}
            <AddModal ref={dialogRef} title='新建档案' width='800px'>
                <CreateRecord onFinish={handleCreateRecordFinish} api={addRecord} type={TYPE} />
            </AddModal>
            {/* 新增病例 */}
            <AddModal ref={addMedicalRef} title='' width="80%">
                <AddMedical id={id} onSave={handleSaveBl} saveApi={saveBL} type={TYPE} />
            </AddModal>
            {/* 检验结果 */}
            <AddModal ref={fileAddRef} title='上传检验结果' width='600px'>
                <FileAdd id={id} uploadApi={uploadResult} />
            </AddModal>
            {/* 病历详情 */}
            <AddModal ref={medicalDetailRef} title='病历详情' width="100%" style={{ top: 20 }}>
                <MedicalDetail id={id} type={TYPE} editable={editable} />
            </AddModal>
        </>

    );
};